<template>
  <div class="loading-box"
       v-show='show'>
    <i class="image_icon"
       :style="{width: size+'px',height: size + 'px' }"
       v-if="icon"></i>
    <p>{{title}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '正在加载'
    },
    icon: {
      type: Boolean,
      default: true
    },
    show: {
      type: Boolean,
      default: true
    },
    toast: {
      type: Boolean,
      default: false
    },
    size: {
      type: Number,
      default: 40
    }
  },
  mounted () {
    if (this.toast) this._toast()
  },
  methods: {
    _toast () {
      setTimeout(() => {
        this.show = false
        this.$emit('close')
      }, 1500)
    }
  }
}
</script>
<style scoped lang='stylus'  rel='stylesheet/stylus'>
.loading-box
  padding 24px
  text-align center
  margin 0 auto
  .image_icon
    display inline-block
    margin-bottom 10px
    background-image url('loading.gif')
    background-size cover
  p
    color #ccc
    font-size 14px
</style>